import { Button, Steps, Upload } from 'antd';
import { action, observable } from 'mobx';
import { observer } from 'mobx-react';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import React, { Component, Suspense } from 'react';
import styled from 'styled-components';
import WebVRSphere from '../Three/WebVRSphere';
import { UploadChangeParam } from 'antd/lib/upload';
import { UploadFile } from 'antd/lib/upload/interface';

const Sphere = styled.div`
width: 800px;
height: 400px;
`;
const { Step } = Steps;

@observer
export default class MethodSphere extends Component<{}, {}>
{
    constructor(props: MethodSphere)
    {
        super(props);
        console.log(this.currentStep);
    }

    @observable currentStep = 0;
    @observable imageUrl = "";
    @observable loading: boolean = false;
    nextStep = () =>
    {
        this.currentStep++;
    };

    beforeUpload()
    {

    }

    @action
    handleChange(info: UploadChangeParam<UploadFile<any>>)
    {
        if (info.file.status === 'uploading')
        {
            this.loading = true;
            return;
        }
        if (info.file.status === 'done')
        {
            this.imageUrl = info.file.response;
        }
    }
    render()
    {
        const uploadButton = (
            <div>
                {this.loading ? <LoadingOutlined /> : <PlusOutlined />}
                <div style={{ marginTop: 8 }}>Upload</div>
            </div>
        );
        return (
            <Sphere>
                <Steps current={this.currentStep}>
                    <Step title="上传全景图" description="上传到服务器去" />
                    <Step title="查看结果" description="用three渲染出来" />

                </Steps>
                <div>
                    {(() =>
                    {
                        switch (this.currentStep)
                        {
                            case 0:
                                return (
                                    <Upload
                                        multiple
                                        name="avatar[]"
                                        listType="picture-card"
                                        className="avatar-uploader"
                                        showUploadList={false}
                                        action="http://localhost:3065/upLoadeThreeimg"
                                        beforeUpload={this.beforeUpload}
                                        onChange={(info) => { this.handleChange(info); }}
                                    >
                                        {this.imageUrl ? <img src={this.imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
                                    </Upload>
                                );
                            case 1:
                                return (
                                    <WebVRSphere imgUrl={this.imageUrl} />
                                );
                            default:
                                break;
                        }
                    })()}

                </div>

                <Button onClick={this.nextStep}>下一步</Button>
            </Sphere >
        );
    }
}
